<template>
	<view class="result-container">
		<view class="result-content">
			<view class="result-icon" :class="[status === 'success' ? 'success' : 'fail']">
				<text v-if="status === 'success'" class="icon success-icon">√</text>
				<text v-else class="icon fail-icon">×</text>
			</view>
			
			<view class="result-title">
				<text v-if="status === 'success'">支付成功</text>
				<text v-else>支付失败</text>
			</view>
			
			<view class="result-message">
				<text v-if="status === 'success'">您的订单已支付成功，感谢您的使用！</text>
				<text v-else>{{message || '支付未完成，请稍后重试'}}</text>
			</view>
			
			<view class="result-actions">
				<button class="action-btn primary" @click="viewOrder">查看订单</button>
				<button class="action-btn secondary" @click="goHome">返回首页</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			status: 'success', // success 或 fail
			message: '', // 失败原因
			orderId: '' // 订单ID
		}
	},
	onLoad(options) {
		console.log('支付结果页加载, options:', options);
		
		// 获取支付状态
		this.status = options.status || 'success';
		
		// 获取失败消息
		if (this.status === 'fail') {
			this.message = options.message ? decodeURIComponent(options.message) : '支付未完成';
		}
		
		// 获取订单ID
		this.orderId = options.orderId || uni.getStorageSync('CURRENT_ORDER_ID') || '';
		
		// 如果支付成功，显示成功提示
		if (this.status === 'success') {
			uni.showToast({
				title: '支付成功',
				icon: 'success',
				duration: 2000
			});
		}
	},
	methods: {
		// 查看订单
		viewOrder() {
			if (this.orderId) {
				// 使用创建的订单详情页
				uni.navigateTo({
					url: `/pages/order/detail?id=${this.orderId}`
				});
			} else {
				uni.switchTab({
					url: '/pages/order/order'
				});
			}
		},
		
		// 返回首页
		goHome() {
			uni.navigateTo({
				url: '/pages/index/index'
			});
		}
	}
}
</script>

<style>
.result-container {
	padding: 40rpx;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #f5f5f5;
}

.result-content {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 60rpx 40rpx;
	width: 100%;
	max-width: 600rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.result-icon {
	width: 160rpx;
	height: 160rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 40rpx;
}

.result-icon.success {
	background-color: rgba(127, 185, 146, 0.1);
}

.result-icon.fail {
	background-color: rgba(255, 107, 107, 0.1);
}

.icon {
	font-size: 100rpx;
	font-weight: bold;
}

.success-icon {
	color: #7FB992;
}

.fail-icon {
	color: #FF6B6B;
}

.result-title {
	font-size: 40rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
	color: #333;
}

.result-message {
	font-size: 28rpx;
	color: #666;
	text-align: center;
	margin-bottom: 60rpx;
	padding: 0 20rpx;
}

.result-actions {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.action-btn {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 40rpx;
	font-size: 28rpx;
	font-weight: normal;
}

.action-btn.primary {
	background-color: #7FB992;
	color: #fff;
}

.action-btn.secondary {
	background-color: #f5f5f5;
	color: #333;
	border: 1px solid #e0e0e0;
}
</style> 